<template>
	<view>
		<view class="address-section">
			<view class="row b-b">
				<text class="tit">银行名称</text>
				<text v-if="bankname != ''">{{bankname}}</text>
				<view v-else class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker @change="bindBanksChange" :value="index" :range="banks">
								<view class="uni-input">{{banks[index]}}</view>
							</picker>
						</view>
					</view>
				</view>

			</view>

			<view class="row b-b">
				<text class="tit">银行卡号</text>
				<text v-if="banknumber != ''">{{banknumber}}</text>
				<input v-else class="input" type="number" v-model="dataObj.banknumber" placeholder="银行卡号"
					placeholder-class="placeholder" />
			</view>

			<view class="row b-b">
				<text class="tit">持有人</text>
				<text v-if="bankholder != ''">{{bankholder}}</text>
				<input v-else class="input" type="text" v-model="dataObj.bankholder" placeholder="持有人姓名"
					placeholder-class="placeholder" />
			</view>

			<button v-if="!bankname && !banknumber && !bankholder" class="add-btn" @click="confirm">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import Region from '@/components/region/region.vue';
	export default {
		components: {
			Region
		},
		data() {
			return {

				banks: [],
				index: 0,

				bankname: '',
				bankholder: '',
				banknumber: '',

				dataObj: {
					bankname: '',
					banknumber: '',
					bankholder: ''
				}
			}
		},
		onLoad(option) {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}

			if (option.bankname !== '') {
				this.bankname = option.bankname
			}

			if (option.bankholder !== '') {
				this.bankholder = option.bankholder
			}

			if (option.banknumber !== '') {
				this.banknumber = option.banknumber
			}

			this.getBanks();

		},
		computed: {
			...mapState(['hasLogin']),
		},
		methods: {
			...mapMutations(['login', 'logout']),

			async getBanks() {
				let current_verson = this.$version;
				let res = await this.$myRequest({
					url: '/configs',
					data: {
						name: 'allow_bank'
					}
				})

				let banksObj = res.data.data

				for (let i = 1; i < 100; i++) {
					if (banksObj[i] == undefined) {
						break;
					}
					this.banks.push(banksObj[i])
				}
			},

			bindBanksChange: function(e) {
				this.index = e.detail.value
			},

			//提交
			async confirm() {
				if (!this.hasLogin) {
					this.islogin = true
					return false;
				}

				if (!this.dataObj.banknumber) {
					this.$api.msg('请输入银行卡号！');
					return;
				}

				if (!this.dataObj.bankholder) {
					this.$api.msg('请输入银行卡持有人！');
					return;
				}

				this.dataObj.token = uni.getStorageSync('token');
				this.dataObj.bankname = this.banks[this.index]
				let res = await this.$myRequest({
					url: '/changeBankInfo',
					data: this.dataObj,
					methods: 'post'
				})

				this.$api.msg(res.data.msg);
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/user/account'
					})
				}, 1000)
			}
		},
	}
</script>

<style lang="scss">
	page {
		background: #f1f1f1;
		// padding-top: 16upx;
	}

	.row {
		display: flex;
		// align-items: center;
		position: relative;
		padding: 20rpx;
		height: 100%;
		background: #fff;
		border-bottom: 1rpx solid #e5e5e5;

		// margin-top: 10rpx;
		.tit {
			flex-shrink: 0;
			width: 120upx;
			font-size: 28upx;
			color: #303133;
		}

		.input {
			flex: 1;
			font-size: 28upx;
			color: #303133;
		}

		.icon-shouhuodizhi {
			font-size: 36upx;
			color: #909399;
		}
	}

	.default-row {
		margin-top: 20upx;

		.tit {
			flex: 1;
		}

		switch {
			transform: translateX(16upx) scale(.9);
		}
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: 32upx;
		letter-spacing: 4upx;
		color: #fff;
		background-color: #29ad97;
		border-radius: 50upx;
		box-shadow: 1px 2px 5px #dadada;
	}
</style>
